// 左边导航内容
var nav = document
  .getElementsByClassName("left_nav")[0]
  .getElementsByClassName("nav-first");
console.log(nav);
for (var i = 0; i < nav.length; i++) {
  nav[i].onmouseover = function () {
    var nav2 = this.getElementsByTagName("div")[0];
    nav2.style.transition = "opacity .6s";
    nav2.style.opacity = "1";
    nav2.style.pointerEvents = "auto";
    nav2.style.top = "38px";

    var dot = this.getElementsByClassName("triangular")[0];
    dot.style.transition = "opacity 1s";
    dot.style.opacity = "1";
    dot.style.pointerEvents = "auto";
    dot.style.top = "30px";
    dot.style.transition = "top .3s";
  };
  nav[i].onmouseout = function () {
    var nav2 = this.getElementsByTagName("div")[0];
    nav2.style.opacity = "0";
    nav2.style.pointerEvents = "none";
    nav2.style.top = "28px";
    nav2.style.transition = "all .5s";

    var dot = this.getElementsByClassName("triangular")[0];
    dot.style.opacity = "0";
    dot.style.pointerEvents = "none";
    dot.style.top = "20px";
    dot.style.transition = "all .5s";
  };
}

// wrap左边的轮波图
var box = document
  .getElementsByClassName("wrap-left-pic")[0]
  .getElementsByTagName("a");
var btn = document
  .getElementsByClassName("wrap_left_down")[0]
  .getElementsByTagName("span");

for (var i = 0; i < btn.length; i++) {
  btn[i].dataset.index = i;
  btn[i].onclick = function () {
    var index = +this.dataset.index;
    box[index].style.transform = "translate3d(0,0,0)";
    box[index].style.transition = "transform 500ms";

    for (var i = 0; i < index; i++) {
      box[i].style.transform = "translate3d(-550px,0,0)";
    }
    for (var i = index + 1; i < btn.length; i++) {
      box[i].style.transform = "translate3d(550px,0,0)";
    }

    for (var i = 0; i < box.length; i++) {
      btn[i].removeAttribute("class");
    }
    this.className = "wrap_left_downOn";
  };
}

// wrap右边轮波图
var img = document.getElementsByClassName("wrap_right");
var wrapRight = document.getElementById("wrap_btn_right");
var wrapLeft = document.getElementById("wrap_btn_left");

var index = 0;
wrapRight.onclick = function () {
  index++;
  if (index == img.length) {
    index = 0;
  }
  console.log(index);
  console.log(img[index]);

  for (var i = 0; i < img.length; i++) {
    img[i].removeAttribute("style");
  }
  img[index].style.display = "block";
};
wrapLeft.onclick = function () {
  index--;
  if (index == -1) {
    index = img.length - 1;
  }
  console.log(index);
  console.log(img[index]);

  for (var i = 0; i < img.length; i++) {
    img[i].removeAttribute("style");
  }
  img[index].style.display = "block";
};

// 正在直播右边轮波图
var live = document
  .getElementsByClassName("live-a")[0]
  .getElementsByTagName("a");
var liveBtn = document
  .getElementsByClassName("live-btn")[0]
  .getElementsByTagName("span");

var liveH = document
  .getElementsByClassName("live-rh")[0]
  .getElementsByTagName("span");

  // head 获取img
for (var i = 0; i < live.length; i++) {
  liveBtn[i].dataset.index = i; //创建一个index
  
  // liveH[i].onclick = function (){
  //   var index = +this.dataset.index; //将string转为number
  //   live[index].style.zIndex = 2;
  //   for (var j = 0; j < liveH.length; j++) {
  //     liveH[j].className = "";
  //     live[j].style.zIndex = 1;
  //   } //排他 即点击下一个属性出现上一个隐藏
  //   this.className = "live-rhOn";
  //   live[index].style.zIndex = 2;
  // };
  // }
  
  // 点获取img
  liveBtn[i].onclick = function () {
    var index = +this.dataset.index;
    live[index].style.transform = "translate3d(0,0,0)";
    live[index].style.transition = "transform 500ms";


    for (var i = 0; i < index; i++) {
      live[i].style.transform = "translate3d(-265px,0,0)";
    }
    for (var i = index + 1; i < liveBtn.length; i++) {
      live[i].style.transform = "translate3d(265px,0,0)";
    }

    for (var i = 0; i < liveBtn.length; i++) {
      liveBtn[i].removeAttribute("class");
    }
    this.className = "wrap_left_downOn";
  };
}


// 番剧动态右边轮播图
var drama = document
  .getElementsByClassName("drama-s-a")[0]
  .getElementsByTagName("a");
var dramaBtn = document
  .getElementsByClassName("drama-btn")[0]
  .getElementsByTagName("span");

for (var i = 0; i < drama.length; i++) {
  dramaBtn[i].dataset.index = i; //创建一个i
  dramaBtn[i].onclick = function () {
    var index = +this.dataset.index;
    drama[index].style.transform = "translate3d(0,0,0)";
    drama[index].style.transition = "transform 500ms";
    for (var i = 0; i < index; i++) {
      drama[i].style.transform = "translate3d(-320px,0,0)";
    }
    for (var i = index + 1; i < dramaBtn.length; i++) {
      drama[i].style.transform = "translate3d(320px,0,0)";
    }

    for (var i = 0; i < dramaBtn.length; i++) {
      dramaBtn[i].removeAttribute("class");
    }
    this.className = "drama-on";
  };
}
// 国创右下轮波图
var aim = document
  .getElementsByClassName("aim-s-a")[0]
  .getElementsByTagName("a");
var aimBtn = document
  .getElementsByClassName("aim-btn")[0]
  .getElementsByTagName("span");

for (var i = 0; i < aim.length; i++) {
  aimBtn[i].dataset.index = i; //创建一个i

  aimBtn[i].onclick = function () {
    //事件绑定
    var index = +this.dataset.index;
    aim[index].style.transform = "translate3d(0,0,0)";
    aim[index].style.transition = "transform 500ms";

    for (var i = 0; i < index; i++) {
      aim[i].style.transform = "translate3d(-320px,0,0)";
    }
    for (var i = index + 1; i < aimBtn.length; i++) {
      aim[i].style.transform = "translate3d(320px,0,0)";
    }

    for (var i = 0; i < aimBtn.length; i++) {
      aimBtn[i].removeAttribute("class");
    }
    this.className = "aim-on";
  };
}
// 番剧周
var car = document
  .getElementsByClassName("cartoon-top")[0]
  .getElementsByTagName("a");
var cardiv = document
  .getElementsByClassName("drama-view")[0]
  .getElementsByClassName("fan-content");

for (var i = 0; i < car.length; i++) {
  car[i].setAttribute("index", i);
  car[i].onclick = function () {
    console.log(this);
    var index = +this.getAttribute("index"); //将string转为number

    for (var j = 0; j < car.length; j++) {
      car[j].className = "";
      cardiv[j].style.zIndex = 1;
    } //排他 即点击下一个属性出现上一个隐藏
    this.className = "cart-on";
    cardiv[index].style.zIndex = 2;
  };
}
// 国创周
var guo = document
  .getElementsByClassName("guo-top")[0]
  .getElementsByTagName("a");
var guodiv = document
  .getElementsByClassName("guo-view")[0]
  .getElementsByClassName("guo-content");

for (var i = 0; i < guo.length; i++) {
  guo[i].setAttribute("index", i); //设置一个index

  guodiv[index].style.zIndex = 2;
  guo[i].onclick = function () {
    var index = +this.getAttribute("index");

  for (var i = 0; i < guodiv.length; i++) {
    guo[i].removeAttribute("class");
    guodiv[index].style.zIndex = 1;
  }
  this.className = "guo-on";
  guodiv[index].style.zIndex = 2;
  };
}


// 导航
var nav = document.getElementsByClassName('nav')[0];
document.onscroll = function(){
  var top = document.body.scrollTop || document.documentElement.scrollTop;//兼容

  if(top < 230){
    nav.style = '';
  }
  if(top >= 230){
    nav.style.position = 'fixed';
    nav.style.top = '0';
    nav.style.backgroundColor = 'rgba(0,0,0,0.5)';
    nav.style.zIndex = 100;
    nav.style.padding = '10px';
  }
}

//跳楼机
var jump = document.getElementsByClassName('jump-nav')[0];
console.log(jump);
var jumpImg = document.querySelector('.jump-img');
console.log(jumpImg);
var jumpSort = document.querySelector('.jump-sort');
console.log(jumpSort);
var jumpBox = document.querySelector('.box');
console.log(jumpBox);

document.onscroll = function(){
  var jumpTop = document.body.scrollTop || document.documentElement.scrollTop;//兼容

  if(jumpTop <= 200){
    jump.style = '';
  }
  if(jumpTop > 200){
    jump.style.position = 'fixed';
    jump.style.top = '10px';
    jumpBox.style.zIndex = '999';
  }
  }

var state = true;
jumpSort.addEventListener('click',function(){
  if (state == true) {
    console.log(true);
    jumpImg.style.display = 'block';
    jumpBox.style.display = 'block';
    state = false;
  } else {
    console.log(false);
    jumpImg.style.display = 'none';
    jumpBox.style.display = 'none';
    state = true;
  }
})
jumpBox.addEventListener('click',function(){
  jumpBox.style.display = 'none';
})


        






    